<template>
<!--合同管控-->
    <div>
        <div class="d-flex a-center">
            <public-search
                    :fields="fields"
                    :search-param="form"
                    @on-query="onQuery"
                    @on-reset="onReset"/>
            <el-divider class="m-b10 m-l20 m-r20" direction="vertical"/>
            <el-button
                    class="button_view m-b10"
                    @click="addContractControl"
            >新增</el-button>
        </div>
        <public-table
                :page="page"
                :table-data="tableData"
                :table-option="tableOption"
                @page-change="onPageChange"
        >
            <template #buttons="scope">
    <!--    <el-button
                    color="#fc7037"
                    style="color: #FFFFFF;"
                    size="large"
                    @click="onDetails(scope.row)"
                >查看</el-button>-->
                <el-button
                        color="#fc7037"
                        style="color: #FFFFFF;"
                        size="large"
                        @click="toPage(scope.row)"
                >款项情况</el-button>
            </template>
        </public-table>
    </div>

    <contract-information-popup
        ref="contractInformationPopupRef"
    />
</template>

<script setup>
import PublicSearch from "@/components/PublicSearch.vue";
import {onMounted, reactive, ref} from "vue";
import PublicTable from "@/components/PublicTable.vue";
import {tableCommonFun} from "@/hooks/tableCommon";
import {useRouter} from "vue-router";
import ContractInformationPopup from "./components/contractInformationPopup.vue";
import {ElDivider} from "element-plus";

const router = useRouter();
const getProjectId = router.currentRoute.value.params.projectId;

const fields = ref([
    {
        type:'input',
        label:'关键字',
        key:'keyword',
        placeholder:'请输入项目名称或者关键字搜索',
        clearable:true
    },
    {
        type:'datetimerange',
        label:'发起时间',
        key:'valueTime',
        startTimeName:'startTime',
        endTimeName:'endTime',
        placeholder:'请选择创建时间',
        clearable:true,
        fun:(e,params)=>{
            if(e && e instanceof Array && e.length>0){
                form.value[params.startTimeName] = e[0];
                form.value[params.endTimeName] = e[1];
            }
            if(!e || (e instanceof  Array && e.length===0)){
                form.value[params.startTimeName] = '';
                form.value[params.endTimeName] = '';
            }
        }
    },
]);

const interfaceConfig = reactive({
    fileName:'investment',
    apiPath:'contractManagementApi.getContractPage',
});

const exportConfig = reactive({
    fileName:'investment',
    apiPath:'meetingsManagementApi.exportMeetings',
    tableName:'会议记录表'
});

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({
    projectId: getProjectId
});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig,defaultParameters);

tableOption.value = [
  { label: "项目名称", prop: "projectName", minWidth: 100 },
  { label: "合同编号", prop: "contractNumber", minWidth: 100 },
  { label: "合同名称", prop: "contractName", minWidth: 100 },
  { label: "签约对象", prop: "signPartyA", minWidth: 100 },
  {
    label: "合同性质", prop: "capitalFlow", formatter: (val) => {
      return { '1': '收款合同', '2': '付款合同' }[val] || '-';
    }, minWidth: 100
  },
  {
    label: "合同类型", prop: "type", formatter: (val) => {
      return { '0': '初稿合同', '1': '招标会审合同', '3': '投资合同' }[val] || '-';
    }, minWidth: 100
  },
  { label: "合同金额", prop: "contractAmount", minWidth: 100 },
  { label: "签订时间", prop: "signTime", minWidth: 120 },
  {
    label: "合同日期", prop: "periodStartTime", formatter: (val, row) => {
      if (row.serviceStartTime) {
        return row.serviceStartTime + '-' + row.serviceEndTime;
      }
      return '-';
    }, minWidth: 120
  },
  { label: "签订部门", prop: "departmentName", minWidth: 120 },
  { label: "签订人", prop: "createUserName", minWidth: 80 },
  {
    label: "审核状态", prop: "examineStatus", formatter: (val) => {
      return ['', '待审核', '审核通过', '审核拒绝'][val] || '-';
    }, minWidth: 100
  },
  {
    label: "附件", prop: "files", formatter: (val) => {
      if (val && val instanceof Array && val.length > 0) {
        return val[0].fileName;
      } else {
        return '-';
      }
    }, minWidth: 100
  },
  {
    label: "操作", prop: 'buttons', slot: true, width: 130,
    overHidden: false
  }
];

form.value= {
    startTime:'',
    endTime:'',
    keyword:'',
}

/**
 * 跳转款项情况
 */
const toPage = (row) => {
    router.push({path:`/investmentProjectManagement/contractControl/contractPaymentSituation/${row.contractId}`});
}

/**
 * 查看详情
 */
const contractInformationPopupRef = ref(null);
const onDetails = (row) => {
    contractInformationPopupRef.value.open();
}

/**
 * 新增合同管控
 */
const addContractControl = () => {
  router.push({path:`/investmentProjectManagement/contractControl/addContractControl`})
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:50,
    });
});
</script>

<style scoped>

</style>
